<html>

<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
    canvas {
        border: 1px solid black;
    }

    body {
        background: rgb(50, 54, 57);
    }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <button id="invertbtn">invertbtn</button>
    <button id="grayscalebtn">grayscalebtn</button>
</body>
<script type="text/javascript">
  var img = new Image();
  img.src = './下载 (1).png';
  img.onload = function() {
    draw(this);
  };

  function draw(img) {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    img.style.display = 'none';
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
      
    var invert = function() {
      for (var i = 0; i < data.length; i += 4) {
        data[i]     = 255 - data[i];     // red
        data[i + 1] = 255 - data[i + 1]; // green
        data[i + 2] = 255 - data[i + 2]; // blue
      }
      ctx.putImageData(imageData, 20, 20);
    };

    var grayscale = function() {
      for (var i = 0; i < data.length; i += 4) {
        var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i]     = avg; // red
        data[i + 1] = avg; // green
        data[i + 2] = avg; // blue
      }
      ctx.putImageData(imageData, 20, 20);
    };

    var invertbtn = document.getElementById('invertbtn');
    invertbtn.addEventListener('click', invert);
    var grayscalebtn = document.getElementById('grayscalebtn');
    grayscalebtn.addEventListener('click', grayscale);
  }
</script>

</html>